/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-06-26 18:55:04
 * @LastEditTime: 2024-07-07 11:39:07
 * @FilePath: /nest_study/web/src/views/system/menu/components/info.tsx
 */
/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-06-23 12:37:05
 * @LastEditTime: 2024-06-25 20:58:59
 * @FilePath: /nest_study/web/src/views/system/role/components/info.tsx
 */

import DrawerWrapper from "@/components/drawer_wrapper"
import { Form, Input, InputNumber, message, Popover, Radio, Select, TreeSelect } from "antd"
import { TMenuInfo } from "../index.type";
import { useEffect, useState } from "react";
import { addInfo, updateInfo } from "@/api/system/menu";
import { rules } from "./rules";
import { isShowMenu, menuTypes } from "../dictionary";
import IconSvg from "@/components/icon_svg";
import { getIconList, getMenuList, IIconList } from "@/utils/fileList";

const menuList = getMenuList();

const ShowInfo = (props: any) => {
    let { info, list } = props;
    let initForm: TMenuInfo = {
        parentId: -1,
        name: '',
        path: undefined,
        //是否为外链（0是 1否）
        external: '1',
        //是否显示（0否 1是）
        visible: '1',
        //菜单类型（M目录 C菜单 F按钮）
        menuType: 'M',
        icon: "",
        sort: 0,
    }
    const [form] = Form.useForm<any>();
    const [infoForm, setInfoForm] = useState<TMenuInfo>({ ...initForm, ...info });
    //菜单列表
    const [propsList, setList] = useState<TMenuInfo[]>([]);

    useEffect(() => {
        let dataList: TMenuInfo[] = [
            {
                id: -1,
                parentId: -9999,
                name: '顶级菜单',
                children: [...list]
            }
        ]
        setList(dataList);
    }, [])
    //提交
    const submit = async () => {

        form.validateFields().then(async values => {
            let info = { ...infoForm, ...values };
            if (info.id) {
                await updateInfo(info);
            } else {
                await addInfo(info);
            }
            message.success('操作成功');
            form.resetFields();
            props.submit();
        }).catch(info => {
            console.log('Validate Failed - ', info);
        });
    }
    //操作 单选
    const changeType = (e: any, key: string) => {
        let { value } = e.target;
        setInfoForm({ ...infoForm, [key]: value });
        form.setFieldValue('component', '');
    }
    //选择icon
    const selectIcon = (item: IIconList) => {
        let { value } = item;
        setInfoForm({ ...infoForm, icon: value });
        form.setFieldValue('icon', value);
    }
    //图标列表 
    const MenuIconContent = () => {
        let iconList = getIconList();
        return (
            <div style={{ width: 400 }}>
                {
                    iconList.map((icon, index) => {
                        return <IconSvg onClick={() => selectIcon(icon)} style={{ margin: '10px', cursor: 'pointer' }} name={icon.value} key={index} />
                    })
                }
            </div>
        )
    }

    return (
        <DrawerWrapper
            title="菜单信息"
            close={() => props.close()}
            submit={() => submit()}
        >
            <Form
                form={form}
                name="info"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 17 }}
                initialValues={{ remember: false }}
                onFinish={submit}
                autoComplete="off"
            >
                <Form.Item label="上级菜单" initialValue={infoForm.parentId} name="parentId" rules={rules.parentId}>
                    <TreeSelect
                        style={{ width: '100%' }}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级菜单"
                        treeDefaultExpandAll
                        allowClear
                        treeData={[...propsList]}
                        fieldNames={{
                            label: 'name',
                            value: 'id'
                        }} />
                </Form.Item>
                <Form.Item label="菜单名称" initialValue={infoForm.name} name="name" rules={rules.name}>
                    <Input allowClear placeholder="请输入菜单名称" />
                </Form.Item>
                <Form.Item label="菜单类型" initialValue={infoForm.menuType} name="menuType" rules={rules.menuType}>
                    <Radio.Group onChange={e => changeType(e, 'menuType')} value={infoForm.menuType}>
                        {
                            menuTypes.map(item => {
                                return <Radio value={item.value} key={item.value}>{item.label}</Radio>
                            })
                        }
                    </Radio.Group>
                </Form.Item>
                {
                    infoForm.menuType != 'B' && (
                        <>
                            <Form.Item label="菜单图标" initialValue={infoForm.icon} name="icon" rules={rules.icon}>
                                <Popover
                                    content={<MenuIconContent />}
                                    title=""
                                    placement="bottom"
                                    trigger="click"
                                >
                                    <Input addonBefore={<IconSvg name={infoForm.icon || ''} />} value={infoForm.icon} className='flex_item' placeholder="请选择菜单图标" />
                                </Popover>
                            </Form.Item>
                            <Form.Item label="是否显示" initialValue={infoForm.visible} name="visible" rules={rules.visible}>
                                <Radio.Group onChange={e => changeType(e, 'visible')} value={infoForm.visible}>
                                    {
                                        isShowMenu.map(item => {
                                            return <Radio value={item.value} key={item.value}>{item.label}</Radio>
                                        })
                                    }
                                </Radio.Group>
                            </Form.Item>
                        </>
                    )
                }
                {
                    infoForm.menuType != 'M' && (
                        <Form.Item label="权限名称" initialValue={infoForm.path} name="path" rules={rules.path}>
                            <Input allowClear placeholder="请输入权限名称" />
                        </Form.Item>
                    )
                }
                {
                    infoForm.menuType == 'M' && (
                        <Form.Item label="路径" initialValue={infoForm.path} name="path">
                            <Select
                                showSearch
                                placeholder="请选择文件路径"
                                options={[...menuList]}
                                fieldNames={{
                                    label: 'value',
                                    value: 'value'
                                }}>
                            </Select>
                        </Form.Item>
                    )
                }
                <Form.Item label="排序" initialValue={infoForm.sort} name="sort" rules={rules.sort}>
                    <InputNumber min={0} precision={0} style={{ width: '100%' }} placeholder="请输入排序" />
                </Form.Item>
            </Form>
        </DrawerWrapper>
    )
}

export default ShowInfo